import classnames from 'classnames'
import style from './index.module.css'

const clockList = Array.from({ length: 23 - 8 + 1 }, (_, i) => 8 + i)

function TimeBar({ timeList = [] }) {
	return (
		<div className={style.timeBarBox}>
			<div className={style.timeBarFrame}>
				{timeList.map(item => (
					<div
						key={item.time}
						className={classnames(style.itemBg, {
							[style.enableBlock]: item?.status === '可预约',
						})}
					/>
				))}
			</div>

			<div className={style.timeNum}>
				{clockList.map(item => <div key={item}>{item}</div>)}
			</div>
		</div>
	)
}

export default TimeBar
